<template>
  <div @touchmove.prevent @touchmove.stop class="container box box-ac box-jc">
    <div v-if="status === 1" class="content animated zoomIn">
      <div class="head box-ver box box-ac box-jc">
        <div class="icon icon-k2-submit"></div>
        <div>已提交</div>
      </div>
      <div class="tc-main title box box-jc tx-c">快去打印封面吧！</div>
      <div class="desc">点击发送按钮，系统将把报销封面文件 发送到你的公司邮箱，在PC电脑下载后 就可以打印了。</div>
      <div class="icon-content box box-ac">
        <div class="icon icon-print1"></div>
        <div class="ani box box-f1 box-jc">
          <div class="icon icon-arrow-right-blue"></div>
          <div class="icon icon-arrow-right-blue"></div>
          <div class="icon icon-arrow-right-blue"></div>
        </div>
        <div class="icon icon-print2"></div>
      </div>
      <div class="bill-num">
        流水号：{{k2Data.billNum}}
      </div>
      <div @click="printBizBill()" class="btn btn-submit box box-ac box-jc">发送</div>
    </div>
    <div v-if="status === 2" :style="{'background-image': `url(${printSuc})`}" class="icon print-suc animated zoomIn">
      <img v-gallery class="print-success-img" :src="printSucImg"/>
    </div>
    <div @click="hidePrint()" class="icon icon-close1 animated rotateIn"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getJMByBillNum } from '@/assets/js/common'
export default {
  name: 'printBill',
  props: ['k2Data'],
  data () {
    return {
      status: 1,
      printSuc: require('../assets/images/print-success.png'),
      printSucImg: require('../assets/images/print-success-img.jpg')
    }
  },
  computed: mapState(['userNum', 'userInfo', 'bizAccountBill']),
  methods: {
    showPreview () {
      this.$refs.imagePreview.openPhotoSwipe()
    },
    // 打印封面
    printBizBill () {
      let JM = getJMByBillNum(this.k2Data.billNum)
      let data = {
        method: 'printBizBill',
        usernum: this.userNum,
        billnum: this.k2Data.billNum
      }
      if (JM === 'CB20') {
        data.method = 'printcover'
      }
      this.$http({
        url: this.$config.api.host,
        data: data
      }).then(res => {
        if (res.code === 200) {
          this.status = 2
          // this.hidePrint()
          // console.log('打印封面成功')
        }
      })
    },
    hidePrint () {
      this.$emit('hidePrint', status)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.container{
  position: absolute;
  z-index: 88;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.5);
}
.content{
  width:6.1rem;
  height:8.9rem;
  border-radius:.2rem;
  background-color:#FFF;
  overflow: hidden;
  font-size:.26rem;
  color:#666;
  .head{
    width:100%;
    height:2rem;
    background-color:$themeColor;
    color:#FFF;
    font-size:.28rem;
  }
  .title{
    padding-top:.5rem;
  }
  .desc{
    line-height:.4rem;
    padding:.2rem .8rem .7rem .8rem;
  }
  .icon-content{
    padding:0 1.25rem;
    margin:0 auto;
  }
  .bill-num{
    padding-top:.8rem;
    text-align: center;
  }
  .btn-submit{
    width:4.7rem;
    height:.88rem;
    margin:.5rem auto;
    color:#FFF;
    border-radius:.1rem;
    font-size:.36rem;
    background-color:$themeColor;
  }
}
.icon-k2-submit{
  width:.8rem;
  height:.8rem;
  margin-bottom:.1rem;
  @include bg-image('../assets/images/icon-k2-submit');
}
.icon-close1{
  width:.5rem;
  height:.5rem;
  position: absolute;
  bottom:.5rem;
  left:50%;
  margin-left:-.25rem;
  @include bg-image('../assets/images/icon-close1');
}
.icon-print1,.icon-print2{
  width:.98rem;
  height:.98rem;
}
.icon-print1{
  @include bg-image('../assets/images/icon-print1');
}
.icon-print2{
  @include bg-image('../assets/images/icon-print2');
}
.icon-arrow-right-blue{
  width:.4rem;
  height:.4rem;
  margin-left:-.1rem;
  @include bg-image('../assets/images/icon-arrow-right-blue');
}
.print-suc{
  position:relative;
  width:6.08rem;
  height:7.72rem;
  // @include bg-image('../assets/images/print-success');
}
.print-success-img{
  position:absolute;
  bottom:.4rem;
  left:1.6rem;
  width:2.9rem;
  height:2rem;
}
</style>
